<template>
	<div class="Oticket">
		<div class="top my-form-item">
			<!-- <el-button class="codesm">扫描二维码验票</el-button> -->
			<div class="inputtext">
				<strong class="fontsize-20px">请输入验证码</strong>
				<el-input class="codetext" :maxlength='6' v-model="codetext" @input="toCheck" placeholder="请输入内容"></el-input>
			</div><div class="inputtext">
				<strong class="fontsize-20px">扫描二维码</strong>
				<el-input class="codetext" :maxlength='6' v-model="codesm"  ></el-input>
			</div>
		</div>
		<div class="bottom my-form-item">
			<div class="main">
				<div class="row" style="pointer-events: none;">
					<label-input class="rowli" :LabelInput="odernum"></label-input>
				</div>
				<div class="row">
					<label class="label">
						<font style="color: red;">*</font>客人名单
					</label>
					<div class="right-con">
						<div class="con">
							<p v-for="i in infopeople" :label="i.name">{{i.name}}:{{i.card}}</p>
						</div>
					</div>
				</div>
				<div class="row">
					<label class="label">
						<font style="color: red;">*</font>产品信息
					</label>
					<div class="right-con"  >
						<div class="con">
							<p v-for="i in infoinfo">{{i.info_name}}</p>
						</div>
					</div>
				</div>
				<div class="row rowlibox"  style="pointer-events: none;">
					<label-input class="rowli" :LabelInput="oderperson"></label-input>
					<div class="li">
					</div>
				</div>
				<div class="row rowlibox"  style="pointer-events: none;">
					<label-input class="rowli" :LabelInput="odertime"></label-input>
					<div class="li">
						<el-radio v-model="radio" :label="1">有效</el-radio>
						<el-radio v-model="radio" :label="2">过期</el-radio>
					</div>
				</div>
			</div>
		</div>
				<div class="my-button">
					<el-button class="submit" @click="changeStatus">确定核销</el-button>
				</div>
	</div>
</template>

<script>
	import {
		mapGetters,
		mapActions
	} from 'vuex'
	export default {
		props: ['son'],
		data() {
			return {
				codetext: "",
				codesm:'',
				radio: 0,
				checkList: [],
				infopeople: [],
				infoinfo: [],
				odernum: {
					label: "订单号",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false,
					style: {
						labelwidth: '100px',
						inputwidth: '660px',
					}
				},
				oderperson: {
					label: "订单人数",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false,
					style: {
						labelwidth: '100px',
						inputwidth: '330px',
					}
				},
				odertime: {
					label: "下单日期",
					name: "",
					buttonStart: false,
					buttonText: "",
					showpassword: false,
					style: {
						labelwidth: '100px',
						inputwidth: '330px',
					}
				}

			}
		},
		computed: {
			...mapGetters([
				'token',
				'res_toCheck'
			]),
		},
		created() {
			this.getorderselectindex('/Oticket')
		},
		mounted() {},
		beforeDestroy() {
			this.getres_toCheck({})
		},
		methods: {
			...mapActions({
				getres_toCheck: 'getres_toCheck',
				getorderselectindex: 'getorderselectindex'
			}),
			toCheck() {
				if (this.codetext.length === 6) {
					this.$api.GettoCheck({
							token: this.token,
							qrcode: this.codetext.toUpperCase()
						})
						.then(res => {
							if (res.code === 200) {
								this.getres_toCheck(res.result)
								this.odernum.name = this.res_toCheck.info.order_id
								this.oderperson.name = this.res_toCheck.info.adult_number + this.res_toCheck.info.children_number;
								this.odertime.name = this.res_toCheck.info.insert_time
								this.radio = this.res_toCheck.lose_status
								this.infopeople = this.res_toCheck.info.people
								this.infoinfo = this.res_toCheck.info.info
							} else {
								this.$alert(res.meg, '提示', {
									confirmButtonText: '确定',
								});
							}
						})
				}

			},
			changeStatus() {
				var res_toCheck=JSON.parse(JSON.stringify(this.res_toCheck)),res_toCheckinfo;
				if(res_toCheck.info!=undefined){
				 res_toCheckinfo=JSON.stringify(res_toCheck.info.info)
				}else{
					 res_toCheckinfo=""
				}
				this.$api.GetchangeStatus({
						token: this.token,
						id: res_toCheck.id, //Int 公司ID
						type: res_toCheck.type, //Int 2 景区3酒店
						order_id: res_toCheck.order_id, //String 订单号
						time: res_toCheck.time, //String 出行时间
						info: res_toCheckinfo //String 出行时间
					})
					.then(res => {
						this.$alert(res.meg, '提示', {
							confirmButtonText: '确定',
							callback: action => {
								if (res.code === 200) {
									if (this.son) {
										this.$emit('odetailclsoe')
									}
									this.getres_toCheck("");
									this.odernum.name = '';
									this.oderperson.name = '';
									this.odertime.name = '';
									this.radio = '';
									this.infopeople = '';
									this.infoinfo = '';
								}
							}
						});
					})
			}
		}
	}
</script>

<style lang="less">
	.Oticket {
		
		.top {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;

			.codesm {
				width: 270px;
				height: 50px;
				background: #ff6600;
				color: #ffffcc;
				border-radius: 10px;
				font-size: 16px;
			}

			.inputtext {
				display: flex;
				align-items: center;

				strong {
					margin-right: 15px;
					color: #ff6600;
				}
			}

			.codetext {
				width: 270px;
				height: 50px;
				.el-input__inner {
					height: 50px;
					border-color: #ff6600;
					font-weight: bold;
					font-size: 20px;
				}
			}
		}

		.bottom {
			width: 100%;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			color: #555;

			.main {
				width: 100%;
				display: flex;
				align-items: flex-start;
				flex-wrap: wrap;

				.row {
					width: 100%;
					display: flex;

					.li {
						width: 330px;
						display: flex;
						align-items: center;
						padding: 0 20px;
						box-sizing: border-box;
					}

					.label {
						width: 100px;
						text-align: right;
						font-size: 12px;
						padding-right: 15px;
					}

					.right-con {
						width: 660px;
						display: flex;
						flex-wrap: wrap;
						text-align: left;

						.con {
							padding: 10px 20px;
							box-sizing: border-box;
							width: 100%;
							height: 100px;
							border: 1px solid #DCDFE6;
							margin-bottom: 10px;
							border-radius: 5px;
							overflow-y: scroll;
						}


					}

				}

				.btn {
					padding-left: 120px;
					padding-top: 50px;
					box-sizing: border-box;

					.el-button {
						width: 365px;
						height: 50px;
						color: #fff;
						background: #41c7db;
						border-radius: 10px;
						font-size: 16px;
						border: 1px solid #8B8B8B;
					}
				}


			}

		}
	}
</style>
